<template>
    <view class="DetailsBox" :style="{ '--color': color }">
        <status-bar title="详情" hideBg="1" :back="back"></status-bar>

        <view class="Onfo">
            <image :src="$imgUrls(site_time.img)" mode="aspectFill" class="Img"></image>
            <view class="TxtOnfo">
                <text class="black size30">{{ site_time.name }}</text>
                <text class="Time">购买时间：{{ info.add_time }}</text>
                <text class="Time">开宴时间：{{ site_time.open_date_time }}</text>
            </view>
            <text class="Waiting stateTXT a-self-start" v-if="info.state == 1">待使用</text>
            <text class="color_ff4 stateTXT a-self-start" v-if="info.state == 3 && info.tail_price != 0">待付尾款</text>
            <text class="color_ff4 stateTXT a-self-start" v-if="info.state == 3 && info.tail_price == 0">待核销</text>
            <text class="used stateTXT a-self-start" v-if="info.state == 2">已使用</text>
            <text class="expiredbg stateTXT a-self-start" v-if="info.state == 4">已过期</text>
            <text class="expiredbg stateTXT a-self-start" v-if="info.state == 5">已退款</text>
            <text class="expiredbg stateTXT a-self-start" v-if="info.state == 6">退款中</text>
        </view>

        <view class="content">
            <view class="black size30">预约信息</view>
            <view class="List">
                <text class="title">预约单号</text>
                <text class="title">{{ info.scan_order_code }}</text>
            </view>
            <view class="List">
                <text class="title">预约日期</text>
                <text class="title">{{ info.add_time }}</text>
            </view>
            <view class="List">
                <text class="title">联系人</text>
                <text class="title">{{ info.user_name }}</text>
            </view>
            <view class="List">
                <text class="title">联系电话</text>
                <text class="title">{{ info.user_tel }}</text>
            </view>
            <view class="row j-sb a-center m-top40">
                <view class="contact" @click="$common.Tel(pageData.service_tel)">
                    <view class="iconfont icon-kefu color_99 size60"></view>
                    <view class="d-flex f-column CallInfo">
                        <text class="CallInfo">客服热线</text>
                        <text class="CallInfo">{{ pageData.service_tel }}</text>
                    </view>
                </view>
                <view class="contact" @click="Refund = true">
                    <view class="iconfont icon-shouye color_99 size60"></view>
                    <view class="d-flex f-column CallInfo">
                        <text class="CallInfo">全额退款</text>
                        <text class="CallInfo">开宴前{{ site_time.cancel_hour }}小时</text>
                    </view>
                </view>
            </view>
        </view>

        <view class="banquet">
            <view class="black size30 p-left20">座席信息</view>
            <view class="banList bot" v-for="(item, index) in info.sites_detail" :key="index">
                <view class="Bnakine">{{ item.type_name }}-{{ item.name }}</view>
                <view class="bnaid">
                    <text class="title">{{ item.goods.name }}</text>
                    <text class="title" v-if="info.state != 3">￥{{ item.site_price }}</text>
                    <text class="title" v-else>定金：￥{{ item.order_price }}</text>
                </view>
                <view class="bnaid" v-if="item.make_up_price">
                    <view class="d-flex a-center">
                        <text class="title">妆造预约</text>
                        <text class="title m-left20">{{ item.make_up_date_str }}</text>
                    </view>
                    <text class="title">￥{{ item.make_up_price }}</text>
                </view>
            </view>
        </view>

        <view class="favorable" v-if="info.num > 0">
            <view class="black size30 p-left20">优惠抵扣</view>
            <view class="PriceList">
                <view class="bnaid">
                    <text class="title">美团劵</text>
                    <text class="title">X{{ info.num }}</text>
                </view>
            </view>
        </view>

        <view class="PriceInfo">
            <view class="black size30 p-left20">支付信息</view>
            <view class="PriceList">
                <view class="bnaid">
                    <text class="title">定金</text>
                    <text class="title">￥{{ info.order_price }}</text>
                </view>
                <view class="bnaid" v-if="info.state != 3">
                    <text class="title">妆造价格</text>
                    <text class="title">￥{{ info.make_up_price }}</text>
                </view>
                <view class="bnaid" v-if="info.tail_price > 0">
                    <text class="title">{{ Copewith }}尾款</text>
                    <text class="title">￥{{ info.tail_price }}</text>
                </view>
                <view class="bnaid" v-if="info.state != 3">
                    <text class="title">支付价格</text>
                    <text class="title">￥{{ info.payment }}</text>
                </view>
                <view class="bnaid" v-if="info.need_refuse_money && info.need_refuse_money > 0">
                    <text class="color_ff2 size26">应退定金</text>
                    <text class="color_ff2 size26">￥{{ info.need_refuse_money }}</text>
                </view>
            </view>
        </view>

        <view class="row j-centert m-top50" v-if="info.state == 1 || info.state == 3">
            <view class="botBtn flexac f-column" v-if="info.state == 3 && info.tail_price != 0" @click="finalPayment">
                <text class="size28">￥{{ info.tail_price }}</text>
                <view class="h6">支付尾款</view>
            </view>
            <view class="botBtn flexac size30" @click="show = true">核销码</view>
            <view class="botBtn flexac size30" @click="toLetter">邀请函</view>
        </view>

        <u-popup :show="show" @close="show = false" mode="center" round="5" :duration="200" :safeAreaInsetBottom="false">
            <view class="Upopup">
                <text class="Utitle">莅临现场并出示给工作人员</text>
                <image :src="$imgUrls(info.qr_code)" class="Ucode"></image>
                <text class="Uorder">{{ info.scan_order_code }}</text>
                <block v-if="info.state == 3 && info.tail_price != 0">
                    <text class="color_ff4 size30 m-top20">需要支付尾款 ￥{{ info.tail_price }}</text>
                    <view class="Ubtn" @click.stop="finalPayment">立即支付</view>
                </block>
            </view>
        </u-popup>

        <u-popup :show="Refund" @close="Refund = false" mode="bottom" round="10" closeable :duration="200">
            <view class="RefundBox">
                <view class="row j-centert black size30">全额退款说明</view>
                <view class="rows m-top30">
                    <u-parse :content="pageData.refuse_desc" :domain="imgUrl"></u-parse>
                </view>

                <view class="row j-sb p-left30 p-right30 m-top50" v-if="info.state == 1 || info.state == 3">
                    <view class="botBtn flexac size30" @click="refuseOrder">确定退款</view>
                    <view class="botBtn Cancel flexac size30" @click.stop="Refund = false">取消</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                color: '#d7b06d',
                show: false,
                Refund: false,
                order_id: '',
                pageData: '',
                info: '',
                site_time: '',
                downTime: null
            };
        },
        onLoad(opt) {
            if (opt.id) this.order_id = opt.id;
            this.getLockOrder();
        },
        onShow() {
            // #ifdef MP-WEIXIN
            let that = this;
            let options = wx.getEnterOptionsSync();
            if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3') {
                let extraData = options.referrerInfo.extraData;
                if (!extraData) return;
                if (extraData.code == 'success') {
                    that.getLockOrder();
                }
            }
            // #endif
            this.Refresh();
        },

        methods: {
            getLockOrder() {
                this.$http
                    .get({
                        url: '/SiteApi/getLockOrder',
                        data: {
                            order_id: this.order_id
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg, 2);
                        const Result = res.data;
                        this.pageData = Result;
                        this.info = Result.info;
                        this.site_time = Result.site_time;
                    });
            },
            finalPayment() {
                let that = this;
                this.$showLoading('');
                this.$http
                    .get({
                        url: '/SiteApi/getTailPayInfo',
                        data: {
                            order_id: this.order_id
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != '100') return this.$Toast(res.msg);
                        const Result = res.data;
                        // #ifdef MP-WEIXIN
                        if (Result.extraData) {
                            wx.openEmbeddedMiniProgram({
                                appId: Result.appId,
                                extraData: Result.extraData
                            });
                            return;
                        }
                        uni.getProvider({
                            service: 'oauth',
                            success: function (resp) {
                                console.log(resp.provider);
                                if (resp.provider) {
                                    uni.requestPayment({
                                        provider: resp.provider[0],
                                        orderInfo: Result,
                                        timeStamp: Result.timeStamp,
                                        nonceStr: Result.nonceStr,
                                        package: Result.package,
                                        signType: Result.signType,
                                        paySign: Result.paySign,
                                        success: function (resj) {
                                            that.getLockOrder();
                                        },
                                        fail: function (err) {
                                            console.log('fail:' + JSON.stringify(err));
                                        }
                                    });
                                }
                            }
                        });
                        // #endif
                    });
            },
            refuseOrder() {
                this.Refund = false;
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/SiteApi/refuseOrder',
                        data: {
                            id: this.order_id
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        this.$Toast(res.msg);
                        this.getLockOrder();
                    });
            },
            CloseTime() {
                clearInterval(this.downTime);
                this.downTime = null;
            },
            Refresh() {
                this.downTime = setInterval(() => {
                    this.getLockOrder();
                }, 6000);
            },
            toLetter() {
                this.toUrl(`/Reserve/After/letter?order_id=${this.order_id}`);
            }
        },
        computed: {
            Copewith() {
                return this.info.state == 3 ? '应付' : '';
            }
        },
        onHide() {
            this.CloseTime();
        },
        onUnload() {
            this.CloseTime();
        }
    };
</script>

<style>
    page {
        background-color: #f5ecda;
        padding-bottom: 40rpx;
    }
</style>
<style lang="scss" scoped>
    .DetailsBox {
        width: 100%;
        box-sizing: content-box;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .Onfo {
        width: 690rpx;
        margin: 0 auto;
        display: flex;
        align-items: center;
        padding-top: 20rpx;
    }
    .Img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }
    .TxtOnfo {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .Time {
        color: #999;
        font-size: 22rpx;
        margin-top: 8rpx;
    }
    .stateTXT {
        font-size: 28rpx;
        margin-left: 20rpx;
    }
    .Waiting {
        color: #009933;
    }
    .used {
        color: #333;
    }
    .expiredbg {
        color: #bcbcbc;
    }
    .content {
        width: 690rpx;
        margin: 24rpx auto 0;
        background-color: #ffffff;
        padding: 20rpx;
        border-radius: 10rpx;
    }
    .List {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 24rpx;
    }
    .title {
        color: #333;
        font-size: 26rpx;
    }
    .contact {
        display: flex;
        align-items: center;
    }
    .CallInfo {
        color: #333;
        font-size: 24rpx;
        margin-left: 10rpx;
    }
    .banquet {
        width: 690rpx;
        margin: 24rpx auto 0;
        background-color: #ffffff;
        padding: 20rpx 0;
        border-radius: 10rpx;
    }
    .banList {
        width: 100%;
        padding: 24rpx 20rpx 24rpx 20rpx;
    }
    .PriceList {
        width: 100%;
        padding: 10rpx 20rpx;
    }
    .Bnakine {
        padding: 4rpx 14rpx;
        background-color: #fff2de;
        border-radius: 8rpx;
        font-size: 24rpx;
        border: 1rpx solid var(--color);
        color: var(--color);
        display: inline-block;
    }
    .bnaid {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 20rpx;
        margin-top: 20rpx;
    }
    .PriceInfo {
        width: 690rpx;
        width: 690rpx;
        margin: 24rpx auto 0;
        background-color: #ffffff;
        padding: 20rpx 0;
        border-radius: 10rpx;
    }
    .botBtn {
        width: 210rpx;
        height: 84rpx;
        background-color: $btnColor;
        border-radius: 8rpx;
        color: #fff;
        margin: 0 10rpx;
    }
    .Cancel {
        background-color: #ccc !important;
        color: white;
    }
    .Upopup {
        width: 580rpx;
        padding: 30rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .Utitle {
        color: #000;
        font-size: 30rpx;
    }
    .Ucode {
        width: 480rpx;
        height: 480rpx;
        margin-top: 20rpx;
    }
    .Uorder {
        color: #000;
        font-size: 28rpx;
        margin-top: 20rpx;
    }
    .Ubtn {
        width: 280rpx;
        height: 88rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 28rpx;
        border-radius: 8rpx;
        background-color: $btnColor;
        margin-top: 20rpx;
    }
    .RefundBox {
        width: 100%;
        padding: 50rpx 30rpx 50rpx 30rpx;
        display: flex;
        flex-direction: column;
    }
    .favorable {
        width: 690rpx;
        margin: 24rpx auto 0;
        background-color: #ffffff;
        padding: 20rpx 0;
        border-radius: 10rpx;
    }
</style>
